<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="w-full min-h-[calc(100vh-360px)] bg-[#F6F9FE] pt-5 pb-12">
    <section class="w-full max-w-300 mx-auto">
      <!-- 用户信息 -->
      <div class="user-info w-full p-10 pt-7 flex flex-col lg:flex-row gap-5 lg:gap-10">
        <!-- avatar -->
        <div class="flex items-center justify-center lg:justify-start">
          <img
            src="../../assets/images/about-banner.png"
            class="size-25 rounded-full object-cover"
            alt=""
          />
        </div>
        <!-- 信息 -->
        <div class="flex-1">
          <div class="flex items-center justify-center lg:justify-start gap-2 mb-5">
            <span class="text-3xl font-bold">{{ userInfo?.name || '暂未輸入暱稱' }}</span>
            <img src="../../assets/images/nan.png" class="size-6" alt="" />
          </div>
          <ul class="flex flex-col lg:flex-row gap-2 lg:gap-5 text-[#333]">
            <li class="pr-5 lg:border-r-solid border-r-[1px] border-r-[#DADFE6]">教師</li>
            <li class="pr-5 lg:border-r-solid border-r-[1px] border-r-[#DADFE6]">36歲</li>
            <li class="pr-5 lg:border-r-solid border-r-[1px] border-r-[#DADFE6]">18712340076</li>
            <li class="pr-5 lg:border-r-solid border-r-[1px] border-r-[#DADFE6]">20年工作經驗</li>
            <li class="pr-5">這是他的電子郵箱</li>
          </ul>
          <div class="mt-7">
            <p>
              <img src="../../assets/images/dot.png" class="size-4" alt="" />
            </p>
            <p class="font-bold my-4">
              這是張三的個人簽名，勵志宣言。這是張三的個人簽名，勵志宣言。這是張三的個人簽名，勵志宣言。
            </p>
            <p class="w-full flex justify-end">
              <img src="../../assets/images/dot.png" class="size-4 rotate-180" alt="" />
            </p>
          </div>
        </div>
        <!-- 退出 -->
        <a-button type="primary" danger ghost @click="logout">退出登錄</a-button>
      </div>

      <!-- 列表 -->
      <div class="p-3 lg:p-7 bg-white rounded-lg mt-5">
        <!-- 顶部切换 + btn -->
        <div
          class="flex justify-between items-center border-b-[1px] border-b-solid border-[#DAE1EC]"
        >
          <ul class="flex gap-5">
            <li
              class="text-sm md:text-base lg:text-xl pb-2 lg:pb-5 border-b-[1px] border-b-solid border-transparent cursor-pointer"
              style="font-family: 'MiSans-Medium'"
              :class="{ 'primary-color': activeTab === 'student' }"
              @click="activeTab = 'student'"
            >
              學生列表
            </li>
            <li
              class="text-sm md:text-base lg:text-xl pb-2 lg:pb-5 border-b-[1px] border-b-solid border-transparent cursor-pointer"
              style="font-family: 'MiSans-Medium'"
              :class="{ 'primary-color': activeTab === 'homework' }"
              @click="activeTab = 'homework'"
            >
              作業列表
            </li>
          </ul>
          <p class="pb-2 lg:pb-5">
            <a-button
              type="primary"
              @click="addStudentRef.open()"
              v-if="userInfo?.identity === IdentityEnum.Teacher"
            >
              添加學生
            </a-button>
            <a-button type="primary" @click="uploadFileRef.open()" v-else>上傳文件</a-button>
          </p>
        </div>
        <!-- 列表内容 -->
        <div class="mt-5">
          <!-- 学生列表 -->
          <a-table
            :columns="columns"
            :data-source="data"
            :pagination="false"
            size="small"
            v-if="activeTab === 'student'"
          >
            <template #headerCell="{ column }">
              <template v-if="column.key === 'name'">
                <span> 姓名 </span>
              </template>
            </template>

            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'name'">
                <div class="flex gap-5">
                  <div class="hidden md:block">
                    <TextAvatar :val="record.name" />
                  </div>
                  <div class="flex flex-col">
                    <p class="text-lg" style="font-family: 'MiSans-Medium'">{{ record.name }}</p>
                    <p class="text-xs md:text-base text-[#7B7D85]">{{ record.account }}</p>
                  </div>
                </div>
              </template>
              <template v-else-if="column.key === 'role'">
                <span class="text-[#7B7D85]"> {{ record.role }} </span>
              </template>
              <template v-else-if="column.key === 'phone'">
                <span class="text-sm md:text-base text-[#7B7D85]"> {{ record.phone }} </span>
              </template>
              <template v-if="column.key === 'action'">
                <div class="flex gap-5">
                  <a-popconfirm title="確認刪除學生嗎？" ok-text="删除" cancel-text="取消">
                    <a>
                      <img src="../../assets/images/del.png" alt="" class="size-4 md:size-5" />
                    </a>
                  </a-popconfirm>
                  <a>
                    <img src="../../assets/images/edit.png" alt="" class="size-4 md:size-5" />
                  </a>
                </div>
              </template>
            </template>
          </a-table>
          <!-- 作业列表 -->
          <ul class="flex flex-col gap-5" v-if="activeTab === 'homework'">
            <li
              class="p-2 md:p-3 lg:p-5 border-solid border-[1px] border-[#DAE1EC] rounded-lg"
              v-for="value in 5"
              :key="value"
            >
              <!-- 顶部信息 -->
              <div class="flex items-center gap-2 md:gap-3 lg:gap-5 pb-5">
                <p
                  class="text-xs md:text-sm px-1 md:px-3 py-1 bg-[#e6f0fd] text-[#5696EE] rounded-md"
                >
                  word
                </p>
                <a-typography-paragraph
                  ellipsis
                  content="這是作業名稱這是作業名稱這是作業名稱這是作業名稱這是作業名稱這是作業名稱這是作業名稱這是作業名稱這是作業名稱這是作業名稱."
                  style="flex: 1; font-size: 20px; font-family: 'MiSans-Medium'; margin-bottom: 0"
                />
                <p class="flex gap-1 md:gap-2 lg:gap-3">
                  <a-button type="primary" ghost @click="uploadFileRef.open()">下載作業</a-button>
                  <a-button type="primary" ghost @click="homeWorkGradingRef.open()">
                    作業評分
                  </a-button>
                </p>
              </div>
              <!-- 作业信息 -->
              <div class="pt-5 border-t-dashed border-t-[1px] border-[#DAE1EC]">
                <a-typography-paragraph
                  ellipsis
                  content="這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介這是作業簡介..."
                  style="color: #7b7d85; font-size: 16px"
                />
                <p class="flex justify-between items-center text-[#7b7d85]">
                  <span>上傳學生：張三</span>
                  <span>上傳時間：2025-08-08 12:34</span>
                </p>
              </div>
            </li>
          </ul>
          <!-- 分页 -->
          <div class="pt-10 flex items-center justify-end">
            <p class="mr-5 text-sm hidden lg:block">每页 10 条</p>
            <a-pagination :total="50" :page-size="10" show-quick-jumper />
          </div>
        </div>
      </div>
    </section>
    <AddStudent ref="addStudentRef" />
    <HomeWorkGrading ref="homeWorkGradingRef" />
    <UploadFile ref="uploadFileRef" />
  </div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { theme, Modal } from 'ant-design-vue'
import TextAvatar from '@/components/TextAvatar.vue'
import AddStudent from './components/AddStudent.vue'
import HomeWorkGrading from './components/HomeWorkGrading.vue'
import UploadFile from '@/components/UploadFileModal.vue'
import { useUserStore } from '@/stores'
import { IdentityEnum } from '@/api/type'

const router = useRouter()
const { token: themeToken } = theme.useToken()
const userInfo = computed(() => useUserStore().user)
const activeTab = ref('student')
const uploadFileRef = ref()
const addStudentRef = ref()
const homeWorkGradingRef = ref()
const columns = [
  {
    name: '姓名',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '角色',
    dataIndex: 'role',
    key: 'role',
  },
  {
    title: '手機號碼',
    dataIndex: 'phone',
    key: 'phone',
  },
  {
    title: '操作',
    key: 'action',
  },
]

const data = [
  {
    key: '1',
    name: '張三',
    account: '賬號2345677732688',
    role: '學生',
    phone: '18790234567',
  },
  {
    key: '2',
    name: '李四',
    account: '賬號2345677732688',
    role: '學生',
    phone: '18790234567',
  },
  {
    key: '3',
    name: '王五',
    account: '賬號2345677732688',
    role: '學生',
    phone: '18790234567',
  },
  {
    key: '1',
    name: '張三',
    account: '賬號2345677732688',
    role: '學生',
    phone: '18790234567',
  },
  {
    key: '1',
    name: '張三',
    account: '賬號2345677732688',
    role: '學生',
    phone: '18790234567',
  },
  {
    key: '1',
    name: '張三',
    account: '賬號2345677732688',
    role: '學生',
    phone: '18790234567',
  },
  {
    key: '1',
    name: '張三',
    account: '賬號2345677732688',
    role: '學生',
    phone: '18790234567',
  },
  {
    key: '1',
    name: '張三',
    account: '賬號2345677732688',
    role: '學生',
    phone: '18790234567',
  },
]
const logout = () => {
  Modal.confirm({
    title: '提示',
    content: '確認退出嗎？',
    centered: true,
    okText: '確認',
    okType: 'danger',
    cancelText: '取消',
    onOk() {
      console.log('OK')
      const { logout } = useUserStore()
      logout()
      router.push('/')
    },
    onCancel() {
      console.log('Cancel')
    },
  })
}
</script>

<style scoped>
.user-info {
  background: url('../../assets/images/user-bg.png') no-repeat center center;
  background-size: cover;
  border-radius: 10px;
}

.primary-color {
  color: v-bind('themeToken.colorPrimary');
  border-color: v-bind('themeToken.colorPrimary');
}
</style>
